<template>
  <div>
    <el-table
      class="linetabel"
      header-row-class-name="addrtabel__header"
      :data="tabelList"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <template slot="empty">
        <div class="emptyLine">暂无数据~</div>
      </template>
      <el-table-column
        type="selection"
        align="center"
        :selectable="
          row => {
            return row.lineId !== '-1';
          }
        "
        width="80"
      >
      </el-table-column>
      <el-table-column prop="lineDriver" label="司机姓名" width="100">
      </el-table-column>
      <el-table-column prop="linePhone" label="手机号" width="110">
      </el-table-column>
      <el-table-column width="150" prop="lineName" label="线路">
      </el-table-column>
      <el-table-column label="提货点名称">
        <template slot-scope="scope">
          {{ scope.row.points.join("，") }}
        </template>
      </el-table-column>
      <el-table-column width="170" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.lineId !== '-1'"
            @click="editLine(scope.row.lineId)"
            >编辑</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.lineId !== '-1'"
            @click="editPutarea(scope.row.lineId)"
            >{{ `${isPointSet ? "提货点" : "小区"}设置` }}</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.lineId !== '-1'"
            @click="deletLines([scope.row.lineId])"
            style="color: #fa6465"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <PutArea
      :dialogType="isPointSet ? 1 : 3"
      :isPointSet="isPointSet"
      :currentLineId="currentLineId"
      :areaList="JSON.parse(JSON.stringify(areaList))"
      :dialogArea.sync="dialogArea"
      @areaIsReady="areaIsReady"
    >
    </PutArea>
  </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync, Emit, Prop } from "vue-property-decorator";
import PutArea from "./PutArea.vue";
import { PoiontList } from "./interface";
import {
  getShipperLinePoints,
  setShipperLinePoints,
  getShippingPointType,
} from "@/api/rection/index";

@Component({
  components: { PutArea },
})
export default class LineTabel extends Vue {
  @Prop({ default: [] })
  tabelList: any;

  @PropSync("deletLinesStatus", { default: true, type: Boolean })
  syncDeletLinesStatus: boolean;

  /** 新增线路弹框 */
  lineDialog = false;

  // 设置投放区域
  dialogArea = false;

  // 提货点地址列表
  areaList: PoiontList[] = [];

  // 批量删除列表
  deleteIds = [];

  // 当前编辑的线路ID
  currentLineId = "";

  /** 0-团长 1-提货点 */
  isPointSet = 1;

  /** 提货点 */
  pointData = {
    /** 提货点类型0=自定提货点，1=菜鸟驿站 */
    type: 0,
    /** 提货点名称 */
    name: "",
    /** 关联线路id */
    lineId: 1,
    /** 关联线路名称 */
    lineName: "",
    /** 关联区域id */
    communityId: 1,
    /** 关联区域名称 */
    communityName: "",
    /** 省id */
    provinceId: "",
    /** 省名称 */
    provinceName: "",
    /** 市id */
    cityId: "",
    /** 市名称 */
    cityName: "",
    /** 区id */
    districtId: "",
    /** 区名称 */
    districtName: "",
    /** 具体位置坐标，经度纬度 */
    lngLat: "",
    /** 联系人姓名 */
    author: "",
    /** 联系电话 */
    phone: "",
    /** 提货点图片，json数组 */
    img: [],
    /** 提货点id */
    pointId: 1,
    /** 提货点详情地址 */
    address: "",
  };

  /**
   * 描述 编辑线路
   */
  @Emit("editLine")
  editLine(data) {
    return data;
  }

  @Emit("deletLines")
  emitDeletLines(data) {
    return data;
  }

  @Emit("getShipperLineList")
  updateShipperList() {
    return true;
  }

  // 多选change事件
  handleSelectionChange(e) {
    this.deleteIds = e.reduce((a, b) => {
      return a.concat(b.lineId);
    }, []);
    this.syncDeletLinesStatus = this.deleteIds.length === 0;
  }

  /**
   * 描述 更新提货点对象
   */
  emitPointData(data) {
    this.pointData = {
      ...this.pointData,
      ...data,
    };
  }

  /**
   * 设置线路的提货点设置
   */
  areaIsReady(data) {
    const params = {
      lineId: this.currentLineId,
      idsString: data.ids,
    };
    setShipperLinePoints(params)
      .then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.dialogArea = false;
          this.updateShipperList();
        }
      })
      .catch(err => {
        this.$message.error(err.msg || "网络异常，请稍后重试");
      });
  }

  /**
   * 删除线路
   */
  deletLines(ids) {
    this.emitDeletLines(ids);
  }

  /**
   * 编辑提货点
   */
  editPutarea(lineId) {
    this.getShipperLinePoints(lineId)
      .then(() => {
        this.currentLineId = lineId;
        this.dialogArea = true;
      })
      .catch(err => {
        console.log(err);
      });
  }

  /**
   * 获取线路设置提货点列表
   */
  getShipperLinePoints(lineId: any) {
    const params = {
      tenantId: "" /**  */,
      userId: "" /**  */,
      lineId,
    };
    return new Promise((resolve, enject) => {
      getShipperLinePoints(params)
        .then(res => {
          if (res.code === 200) {
            this.currentLineId = lineId;
            let tempList = res.data.filter(
              i => i.id !== lineId && i.id !== "-1",
            );
            tempList = tempList.filter(i => i.list && i.list.length);
            this.setListDisabled(tempList);
            this.areaList = res.data;
            resolve(res.data);
          }
        })
        .catch(err => {
          this.$message.error(err.msg || "网络异常，请稍后重试");
          enject();
        });
    });
  }

  /**
   * 设置非当前编辑的线路不可操作
   */
  setListDisabled(list) {
    list.forEach(i => {
      i.isChosen = false;
      i.disabeld = true;
      i.list.forEach(t => {
        t.isChosen = false;
        t.disabeld = true;
        t.list.forEach(d => {
          d.isChosen = false;
          d.disabeld = true;
          t.checkAll = false;
        });
      });
    });
  }

  /**
   * 检测是团长还是提货点
   */
  getShippingPointType() {
    getShippingPointType({})
      .then(res => {
        if (res.code === 200) {
          this.isPointSet = res.data;
        }
      })
      .catch(err => {
        this.$message.error(err.msg || "网络异常，请稍后重试");
      });
  }

  mounted() {
    this.getShippingPointType();
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/logistics/distributionLines.scss";

.emptyLine {
  width: 100%;
  height: 80px;
  background-color: white;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-left: -15px;
  font-size: 14px;
  color: #b3b3b3;
}
</style>
